<template>
  <div class="clearfix">
    <CloudUpload
      :action="actionUrl"
      list-type="picture-card"
      :file-list="fileList"
      :show-upload-list="false"
      :isShowPhotoWall="true"
      :before-upload="beforeUpload"
      @preview="handlePreview"
      @change="handleChange"
    >
      <div v-if="fileList.length < 20">
        <CloudIcon type="plus" />
        <div class="ant-upload-text">Upload</div>
      </div>
    </CloudUpload>
    <CloudModal
      :visible="previewVisible"
      :showFooter="false"
      @cancel="handleCancel"
      title=""
    >
      <img alt="example" style="width: 100%" :src="previewImage" />
    </CloudModal>
    <span>
      切换开关改变上传地址，上传失败
      <CloudSwitch v-model="checked"></CloudSwitch>
    </span>
  </div>
</template>

<script>
export default {
  title: '8.照片墙 ',
  subTitle: '用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。',
  data() {
    return {
      previewVisible: false,
      previewImage: '',
      checked: false,
      fileList: [
        {
          uid: '-1',
          name: 'image1.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-2',
          name: 'image2.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-3',
          name: 'image3.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-4',
          name: 'image4.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-5',
          name: 'image5.png',
          status: 'error',
        },
      ],
    }
  },
  computed: {
    actionUrl() {
      return this.checked ? 'http://172.31.15.10:53000/mock/53/designCenter/app/uploadPic' : 'https://www.mocky.io/v2/5cc8019d300000980a055e76'
    }
  },
  methods: {
    getBase64(img, callback) {
      const reader = new FileReader();
      reader.addEventListener('load', () => callback(reader.result));
      reader.readAsDataURL(img);
    },
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('你只能上传JPG/PNG文件!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('图片大小必须小于2MB!');
      }
      return isJpgOrPng && isLt2M;
    }
  }
}
</script>

<style lang="scss">
</style>